<html>
<head><title>CSS - Card SharkS.</title>
<link rel=stylesheet href="style.css" type="text/css" />

<script type="text/javascript">

var cards = new Array(1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8);
var prev = 0;
var prevID = "undef";
var prevprevID;
var first = true;
var turnback = false;
var p1 = 0; var p2 = 0;
var isP1 = true;

for(i = 0; i < 100; ++i){ //shuffle cards
	rand = Math.floor(Math.random()*15);
	rand2 = Math.floor(Math.random()*15);
	tmp = cards[rand];
	cards[rand] = cards[rand2];
	cards[rand2] = tmp;
}

function click(id, num) {

	if(turnback){
		document.getElementById(prevID).style.backgroundImage="url('memorycard.png')";
		document.getElementById(prevprevID).style.backgroundImage="url('memorycard.png')";
		turnback = false;
	}

	prevprevID = prevID;
	prevID = id;

	str = "url(memorycard" + num + ".png)"; 	

	if(first){
		prev = num;
		first = false;
	}else{
		if(prev == num){ //matching cards
			if(isP1)			
				++p1;
			else
				++p2;	
		}else{  //turn back the cards
			turnback = true;
			isP1 = !isP1;
		}
		first = true; //reset
	}

	document.getElementById(id).style.backgroundImage=str;	
	document.getElementById("scoreboard").innerHTML = "Card shark #1: " + p1 + " Card shark #2: " + p2;
}

</script>
</head>

<body>
<div id="maindiv">
<div id="c00" class="card" onclick="click('c00', cards[0])"></div><div id="c01" class="card" onclick="click('c01', cards[1])"></div><div id="c02" class="card" onclick="click('c02', cards[2])"></div><div id="c03" class="card" onclick="click('c03', cards[3])"></div>
<div id="c10" class="card" onclick="click('c10', cards[4])"></div><div id="c11" class="card" onclick="click('c11', cards[5])"></div><div id="c12" class="card" onclick="click('c12', cards[6])"></div><div id="c13" class="card" onclick="click('c13', cards[7])"></div>
<div id="c20" class="card" onclick="click('c20', cards[8])"></div><div id="c21" class="card" onclick="click('c21', cards[9])"></div><div id="c22" class="card" onclick="click('c22', cards[10])"></div><div id="c23" class="card" onclick="click('c23', cards[11])"></div>
<div id="c30" class="card" onclick="click('c30', cards[12])"></div><div id="c31" class="card" onclick="click('c31', cards[13])"></div><div id="c32" class="card" onclick="click('c32', cards[14])"></div><div id="c33" class="card" onclick="click('c33', cards[15])"></div>

<p id="scoreboard">Card shark #1: 0 Card shark #2: 0</p>

</div>
</body>


</html>
